import {
    StyleSheet,
    ImageBackground,
    Text,
    FlatList,
    ToastAndroid,
    BackHandler,
    View,
    Image,
    Button,
    Modal,
    TextInput,
    ScrollView,
    Dimensions,
    TouchableOpacity,
    PixelRatio,
    Platform,
    Share,
    Animated
} from 'react-native';
import { AntDesign } from '@expo/vector-icons';
import React, { useCallback, useState, useEffect, useLayoutEffect, useRef } from 'react';
import Swiper from 'react-native-swiper';
import '../global'

const Home = ({ navigation }) => {
    return <View style={{ flex: 1,backgroundColor: '#ccc' }}>
        <View style={styles.header}>
            <View style={styles.searchBar}>
                <AntDesign
                    style={{
                        position:'absolute',
                        left: 20,
                    }}
                    name='home' color='#fff' size={25}/>
                <TextInput
                    placeholder='请输入'
                    style={{
                        paddingLeft: 60,
                        fontSize: 20,
                        color: '#fff'
                    }}
                    placeholderTextColor= '#fff'
                ></TextInput>
            </View>
            <AntDesign name='home' color='#fff' size={25}/>
        </View>
        <TouchableOpacity activeOpacity={0.9} style={styles.list}>
            <Image 
            style={{
                width: p2d(100),
                height: p2d(100),
            }}
                source={require('../assets/img.png')}
            />
            <Text style={{marginLeft: p2d(40)}}>居家维修保养</Text>
            <AntDesign
                style={{marginLeft:'auto'}}
            name='right' color='#ccc' size={25}/>
        </TouchableOpacity>
        <TouchableOpacity activeOpacity={0.9} style={styles.list}>
            <Image 
            style={{
                width: p2d(100),
                height: p2d(100),
            }}
                source={require('../assets/img.png')}
            />
            <Text style={{marginLeft: p2d(40)}}>居家维修保养</Text>
            <AntDesign
                style={{marginLeft:'auto'}}
            name='right' color='#ccc' size={25}/>
        </TouchableOpacity>
        <TouchableOpacity activeOpacity={0.9} style={styles.list}>
            <Image 
            style={{
                width: p2d(100),
                height: p2d(100),
            }}
                source={require('../assets/img.png')}
            />
            <Text style={{marginLeft: p2d(40)}}>居家维修保养</Text>
            <AntDesign
                style={{marginLeft:'auto'}}
            name='right' color='#ccc' size={25}/>
        </TouchableOpacity>
        <TouchableOpacity activeOpacity={0.9} style={styles.list}>
            <Image 
            style={{
                width: p2d(100),
                height: p2d(100),
            }}
                source={require('../assets/img.png')}
            />
            <Text style={{marginLeft: p2d(40)}}>居家维修保养</Text>
            <AntDesign
                style={{marginLeft:'auto'}}
            name='right' color='#ccc' size={25}/>
        </TouchableOpacity>
        <TouchableOpacity activeOpacity={0.9} style={styles.list}>
            <Image 
            style={{
                width: p2d(100),
                height: p2d(100),
            }}
                source={require('../assets/img.png')}
            />
            <Text style={{marginLeft: p2d(40)}}>居家维修保养</Text>
            <AntDesign
                style={{marginLeft:'auto'}}
            name='right' color='#ccc' size={25}/>
        </TouchableOpacity>
    </View>
}

const styles = StyleSheet.create({
    header: {
        height: p2d(74),
        paddingTop: p2d(12),
        paddingBottom: p2d(12),
        paddingLeft: p2d(24),
        paddingRight: p2d(24),
        backgroundColor: '#f00',
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center'
    },
    searchBar:{
        width: p2d(526),
        height: p2d(50),
        justifyContent: 'center',
        backgroundColor: 'rgba(255,255,255,0.66)',
        borderRadius: p2d(25)
    },
    list: {
        marginTop: p2d(10),
        backgroundColor: '#fff',
        height: p2d(120),
        flexDirection: 'row',
        paddingLeft: p2d(24),
        paddingRight: p2d(24),
        justifyContent: 'space-between',
        alignItems: 'center'
    }
})

export default Home;